<template>
	<view class="tian">
		<ul class="tian-shang">
			<li>
				<p>联系人</p>
				<input type="text" placeholder="请输入联系人" v-model="obj.name" />
			</li>
			<li>
				<p>性别</p>
				<checkbox-group @change="chang" class="tianas">
					<label>
						<view>
							<checkbox :checked="obj.gender==='男'?true:false" />
						</view>
						<view>男</view>
					</label>
					<label>
						<view>
							<checkbox :checked="obj.gender==='女'?true:false" />
						</view>
						<view>女</view>
					</label>
				</checkbox-group>
			</li>
			<li>
				<p>手机号</p>
				<input type="text" placeholder="请输入手机号" v-model="obj.phone" />
			</li>
			<li>
				<p>收货地址</p>
				<input type="text" placeholder="请输入收货地址" v-model="obj.addres" />
			</li>
			<li>
				<p>门牌号</p>
				<input type="text" placeholder="请输入门牌号" v-model="obj.house" />
			</li>
		</ul>
		<div class="tian-zhong">
			<checkbox-group @change="changess" class="tian-zhongs">
				<label>
					<view>
						<checkbox :checked="obj.flag==='true'?true:false" />
					</view>
					<view>设置为默认地址</view>
				</label>
			</checkbox-group>
		</div>
		<div class="tian-xia">
			<button @click="baocun">保存</button>
		</div>
	</view>
</template>

<script>
	import request from "../../utils/request.js"
	export default {
		data() {
			return {
				obj: {
					name: "",
					gender: "男",
					phone: "",
					addres: "",
					house: "",
					flag: 'true'
				}
			}
		},
		methods: {
			chang() {
				if (this.obj.gender === '男') {
					this.obj.gender = '女'
				} else {
					this.obj.gender = '男'
				}
			},
			changess() {
				if (this.obj.flag === 'true') {
					this.obj.flag = 'false'
				} else {
					this.obj.flag = 'true'
				}
			},
			async baocun() {
				let data = []
				for (let key in this.obj) {
					if (this.obj[key] === "") {
						data.push(false)
					}
				}
				let arrs = /^1[3-9][0-9]{9}$/;
				if (data.length !== 0) {
					wx.showToast({
						title: '请输入完整信息',
						icon: 'error',
						duration: 1000
					})
				} else if (!arrs.test(this.obj.phone)) {
					wx.showToast({
						title: '请输入正确手机',
						icon: 'error',
						duration: 1000
					})
				} else {
					if (this.obj.id !== undefined) {
						let data = await request("/froms/gaidizhi", this.obj, 'GET')
						if (data === 1) {
							wx.showToast({
								title: '编辑成功',
								icon: 'success',
								duration: 1000
							})
							setTimeout(()=>{
								uni.reLaunch({
								    url: '/pages/home/dizhi'
								});
							},1000)
						}
					} else {
						let data = await request("/froms/tiandizhi", this.obj, 'GET')
						if (data === 1) {
							wx.showToast({
								title: '添加成功',
								icon: 'success',
								duration: 1000
							})
						}
					}

				}
			}
		},
		async onLoad(option) {
			if (option.id !== undefined) {
				let data = await request("/froms/chadizhi", {
					id: option.id
				}, 'GET')
				this.obj = data
			}
		}
	}
</script>

<style scopet>
	.tian {
		width: 100vw;
		height: 100vh;
	}

	.tian-shang {
		width: 100%;
		background: #fff;
	}

	.tian-shang li {
		width: 100%;
		height: 50px;
		border-bottom: 1px solid #ccc;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.tian-shang li p {
		font-size: 15px;
		margin-left: 5%;
		color: rgb(127, 127, 127);
	}

	.tian-shang li input {
		width: 70%;
		height: 30px;
		border: none;
		outline: none;
		margin-right: 5%;
		font-size: 15px;
	}

	.tianas {
		width: 70%;
		height: 30px;
		margin-right: 5%;
		display: flex;
		align-items: center;
	}

	.tianas label {
		display: flex;
		align-items: center;
		margin-right: 20px;
	}

	.tian-zhong {
		width: 100%;
		height: 50px;
		background: #fff;

	}

	.tian-zhongs {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
	}

	.tian-zhongs label {
		display: flex;
		align-items: center;
		margin-left: 5%;
	}

	.tian-xia {
		width: 100%;
		height: 50px;
		display: flex;
		justify-content: space-around;
		align-items: flex-end;
	}

	.tian-xia button {
		width: 80%;
		height: 40px;
		border: none;
		outline: none;
		background: rgb(51, 51, 51);
		color: #fff;
		font-size: 20px;
		line-height: 40px;
	}
</style>
